<template>
    <div class="types">
        <div class="select" ref="select"></div>
        <div :class="{ type: true, active: selectIndex == index }" v-for="(item, index) in types" :key="index"
            @click="changeType(index)">{{ item.label }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const selectIndex = ref(0)
const props = defineProps({
    types: {
        type: Array as any,
        default: () => []
    }
})
const emits = defineEmits(['getData'])
const changeType = (index: number) => {
    if (selectIndex.value == index) return
    const types = document.querySelectorAll('.type') as NodeListOf<HTMLElement>
    types[selectIndex.value].classList.remove('active')
    emits('getData', props.types[index].value)
    const diff = Math.abs(index - selectIndex.value)
    const duration = diff * 0.1 > 0.6 ? 0.6 : diff * 0.1
    const select = document.querySelector('.select') as HTMLElement
    selectIndex.value = index
    select.style.top = `${index * 30 + 5}px`
    select.style.transition = `all ${duration}s`
}
</script>

<style scoped lang="scss">
.types {
    padding: 0px 5px;
    overflow-y: auto;
    position: relative;
    @include mixin.scroll_bar();
    @include mixin.box_shadow();

    .select {
        width: calc(100% - 10px);
        height: 25px;
        background-color: $selectBack;
        border-radius: $boxRadius;
        position: absolute;
        top: 5px;
    }

    .type {
        text-align: center;
        position: relative;
        height: 25px;
        line-height: 25px;
        cursor: pointer;
        margin-top: 5px;
        user-select: none;
        z-index: 10;

        &:hover {
            color: $primary;
        }


    }

    .active {
        color: $primary;
    }
}
</style>